<template>
  <div>
    <div style="text-align: center">工单页面</div>
    <!-- 条件查询表单 -->
    <div>
      <el-form
        :inline="true"
        :model="serveWorkOrderDTO"
        class="demo-form-inline"
      >
        <el-form-item label="服务项目">
          <el-input
            v-model="serveWorkOrderDTO.serveproject"
            placeholder="服务项目"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="工单状态">
          <el-select
            v-model="serveWorkOrderDTO.state"
            placeholder="工单状态"
            style="width: 200px"
          >
            <el-option label="已完成" value="已完成" />
            <el-option label="服务中" value="服务中" />
            <el-option label="待服务" value="待服务" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryWorkOrder">查询</el-button>
          <el-button type="primary" @click="resetWorkOrder">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据展示 -->
    <div>
      <el-table :data="serveWorkOrders" style="width: 100%" height="100%">
        <el-table-column
          fixed
          label="工单号"
          prop="workordernumber"
          width="150"
          align="center"
        />
        <el-table-column
          label="服务项目"
          prop="serveproject"
          width="150"
          align="center"
        />
        <el-table-column
          label="实际付款"
          prop="actualpayment"
          width="150"
          align="center"
        />
        <el-table-column
          label="派单时间"
          prop="sendordertime"
          width="180"
          align="center"
        />
        <el-table-column
          label="结束时间"
          prop="endtime"
          width="180"
          align="center"
        />
        <el-table-column
          label="工单状态"
          prop="state"
          width="150"
          align="center"
        />
        <el-table-column
          label="服务人员姓名"
          prop="servePerson.pname"
          width="150"
          align="center"
        />
        <el-table-column
          label="客户姓名"
          prop="cid"
          width="150"
          align="center"
        />
        <el-table-column
          fixed="right"
          label="操作"
          min-width="150"
          align="center"
        >
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="particularsWorkOrder(scope.row.wid)"
            >
              详情
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="removeWorkOrder(scope.row.wid)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页控件 -->
    <div class="block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:current-page="pageIndex"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 7]"
        layout="sizes, prev, pager, next, total"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 修改弹出框 -->
    <div></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      serveWorkOrderDTO: {
        pname: "",
      },
      pageIndex: 1,
      pageSize: 3,
      total: 0,
      pages: 0,
      serveWorkOrders: [],
    };
  },
  mounted() {
    this.getAll();
  },
  methods: {
    //工单详情
    particularsWorkOrder(id) {
      this.$router.push({
        name: "serveWorkOrderParticulars",
        params: { wid: id },
      });
    },

    //删除工单
    removeWorkOrder(id) {
      this.$confirm("是否要删除工单？", "工单删除", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          this.$axios.delete("/serveworkorder/" + id).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getAll();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message.info("删除工单已取消");
        });
    },

    //条件查询服务人员
    queryWorkOrder() {
      this.getAll();
    },

    //重置条件查询
    resetWorkOrder() {
      this.servePersonDTO = {
        pname: "",
        gender: "",
        age: "",
        servetype: "",
        area: "",
        state: "",
      };
      this.pageIndex = 1;
      this.pageSize = 3;
      this.getAll();
    },

    //查询全部工单
    getAll() {
      this.$axios
        .post(
          "/serveworkorder/" + this.pageIndex + "/" + this.pageSize,
          this.serveWorkOrderDTO
        )
        .then((res) => {
          console.log(res.data.data);
          this.total = res.data.data.total;
          this.pages = res.data.data.pages;
          this.serveWorkOrders = res.data.data.records;
        });
    },

    //每页显示几条数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getAll();
    },

    //当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.getAll();
    },
  },
};
</script>

<style>
</style>